<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }
        .component {
            background-color: rgba(255,47,21,0.89);
            margin: 10px;
            width: 200px;
            height: 50px;
            display: none;


        }
    </style>
    <script src="jquery-3.2.1.min.js" type="text/javascript"></script>
    <script src="jquery-ui.min.js" type="text/javascript"></script>
    <script src="jquery.fullPage.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
            $(".h5").fullpage({
                'sectionsColor': ['#254875', '#00FF00', '#254877', '#254875'],
                afterLoad:function(anchorLink,index){
                    $(".h5").find(".page").eq(index-1).trigger("onLoad");

                },

                onLeave:function(index,nextIndex){
                    $(".h5").find(".page").eq(index-1).trigger("onLeave");

                }
            });
             $(".page").on("onLoad",function(){
                 console.log($(this).attr("id"),"==>>",'onLoad');
                 $(this).find(".component").trigger("onLoad");
            })
            $(".page").on("onLeave",function(){
                console.log($(this).attr("id"),"==>>",'onLeave');
                $(this).find(".component").trigger("onLeave")
            })
            $(".component").on("onLoad",function(){
               $(this).fadeIn();
               return false
            })
            $(".component").on("onLeave",function(){
                $(this).fadeOut();
                return false
            })
        })
    </script>
</head>

<body>
<div class="h5">
        <div class="page section" id="page1">
            <div class=" component prag1">这是第一自然段</div>
            <div class=" component prag2">这是第二自然段</div>
        </div>
        <div class="page section"id="page2">
            <div class=" component prage1">这里是第二页</div>
        </div>
        <div class="page section" id="page3">
            <div class="component prage1">这里是第三页</div>
        </div>
        <div class="page section" id="page4">
            <div class="component prage1">这里是第四页</div>
        </div>

</div>
</body>
</html>